<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THREE.js BufferAnimationSystem</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        font-family: monospace;
        background-image: radial-gradient(#2e141e, #0e0609);
      }
      #soundcloud {
        position: absolute;
        z-index: 0;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
      }

      .img_container {
        display: inline-block;
        float: left;
        line-height: 0;
        margin: 0 10px 10px;
      }
      .player_container {
        display: inline-block;
        float: left;
      }

      #player {
        width: 240px;
        margin: 10px 0;
        display: block;
      }

      #audioInput {
        width: 220px;
        margin: 0;
        padding: 4px 10px;
        display: block;
        outline: none;
        border: none;
      }

      #sc_img {
        width: 90px;
      }
    </style>
</head>
<body>
<div id="three-container"></div>


<div id="soundcloud">
  <div class="img_container">
    <a href="" id="sc_link">
      <img src="" alt="" id="sc_img">
    </a>
  </div>
  <div class="player_container">
    <audio id="player" controls="" autoplay="false" preload="preload" autobuffer="autobuffer" src=""></audio>
    <input id="audioInput" type="url"/>
  </div>
</div>

<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>

<script src="../_lib/TweenMax.min.js"></script>
<script src="../../bower_components/three.js/build/three.js"></script>
<script src="../../bower_components/three.js/examples/js/controls/OrbitControls.js"></script>
<script src="../../dist/bas.js"></script>
<script src="../_js/utils.js"></script>
<script src="../_js/three_post.js"></script>
<script src="../_js/root.js"></script>

<script src="main.js"></script>
</body>
</html>
